<template>
  <div class="table-edit">
    <el-tabs v-model="activeName" class="full-tabs">
      <el-tab-pane label="字段信息" lazy name="basic">
        <column-edit :columns="columns" :table-id="tableId" :table-name="table.tableName" @update-column="loadInfo"/>
      </el-tab-pane>
      <el-tab-pane label="表单信息" lazy name="formInfo">
        <form-edit :columns="formColumns" :table-id="tableId" :table-name="table.tableName"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import formEdit from './comp/form-edit'
import columnEdit from './comp/column-edit'
import {getTable} from '@/api/system/table'

export default {
  name: 'tableEdit',
  components: {
    formEdit,
    columnEdit
  },
  data() {
    return {
      tableId: null,
      activeName: 'formInfo',
      table: {},
      columns: [],
      formColumns: []
    }
  },
  created() {
    this.tableId = this.$route.params.tableId
    this.loadInfo()
  },
  methods: {
    async loadInfo() {
      const res = await getTable(this.tableId)
      const data = res.data
      this.table = data.table
      this.columns = this.filterColumns(data.columns)
      this.formColumns = data.columns.filter(o => o.isInsert !== '1')
    },
    filterColumns(columns) {
      return columns.filter(o => {
        return o.isPk !== '1'
      })
    }
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>
.table-edit {
  position: relative;
  height: calc(100vh - 84px);
  box-sizing: border-box;
  padding: 15px 20px;



}
</style>
